<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xHTML" xml:lang="en" lang="en">
<head>
  
  <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"/>
  
  <title>readme for pngHack, A Javascript &amp; Prototype based PNG hack</title>
  <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" charset="utf-8" />
  <script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
  <script src="javascripts/pngHack.js"   type="text/javascript" charset="utf-8"></script>
  <script src="javascripts/functions.js" type="text/javascript" charset="utf-8"></script>
  
</head>

<body>

  <h1>A JavaScript &amp; Prototype based PNG solution</h1>
  <h2>A method that makes 32 bit PNG's transparency work in Internet Explorer 6</h2>
  <hr />
  
  <ul id="nav">
    <li><a href="#about">About this Method:</a></li>
    <li><a href="#how">How to Use:</a></li>
    <li><a href="#examples">Examples:</a></li>
    <li><a href="#download">Download or svn checkout:</a></li>
    <li><a href="#known-issues">Known Issues:</a></li>
  </ul>
  
  <h3><a name="about">About this Method:</a></h3>
  <p>I didn't like the <a href="http://www.mongus.net/pngInfo/">htc based hacks</a> as that seemed a bit invasive. I think a web page shouldn't need much more than HTML, CSS, and JavaScript; a weird htc file mixed with some invalid CSS sucks.</p>
  <p>I extracted the JavaScript in the htc file and implemented it into a function that works for me. Since I use Prototype on most of my web projects, I used some Prototype functionality in this hack. Hence the Prototype dependency.</p>
  <ul>
    <li>Dependent on <a href="http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate" title="Prototype JavaScript framework: Prototype 1.6.0">Prototype 1.6</a> <small>(It probably works on previous versions...)</small></li>
    <li>Works on <strong>img elements</strong> and on <strong>background images of elements</strong></li>
    <li>PNG's can be used as backgrounds. However, <strong>image tiling will not work</strong></li>
    <li><strong>Safe to use</strong> - You don't have to make an exception or write separate code for IE6</li>
    <li>
      <strong>Example Usage:</strong>
      <ul style="font-family: monospace; font-size: 13px;">
        <li>$('myPNG').pngHack();</li>
        <li>$$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');</li>
      </ul>
    <li>Background PNG's used in :hover's might need another application of the method</li>
    <li><strong>Minified</strong> version included</li>
  </ul>

  <hr />

  <h3><a name="how">How to Use:</a></h3>
  <ol>
    <li>
      Ensure that the <a href="http://www.prototypejs.org/" title="Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications">Prototype library</a> is included in &lt;head&gt; the HTML page.
<pre>
&lt;script src=&quot;javascripts/prototype.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
</pre>
    </li>
    <li>
      Ensure that the code in the <a href="http://pnghack.googlecode.com/svn/trunk/javascripts/pngHack.js">pngHack.js</a> file is included in the HTML page one way or another. The pngHack method should look something like this:
<pre>
  Element.addMethods({
    pngHack: function(el){
      var el = $(el);
      if (!Prototype.Browser.IE) return el;
      var gif = 'images/s.gif';
      if ((el.match('img')) && (el.src.include('png'))){
        var alphaImgSrc  = el.src;
        var sizingMethod = 'scale';
        el.src = gif;
      } else if (el.getStyle('backgroundImage').include('png')){
        var bgc = el.getStyle('backgroundColor') || '';
        var alphaImgSrc = el.getStyle('backgroundImage').gsub(/url\(|\)|'|"/, '');
        var sizingMethod = 'crop';
        el.setStyle({ background: [bgc, ' url(', gif, ') no-repeat'].join('') });
      } else {
        return el;
      }
      el.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{al}",sizingMethod="#{sz}")'.interpolate({ al: alphaImgSrc, sz: sizingMethod });
      return el;
    }
  });
</pre>
    </li>
    <li><strong>Create your images.</strong> Ensure that your PNG images are of the 32 bit transparent variety. <a href="http://www.adobe.com/products/fireworks/">Fireworks</a> can make them.
    </li>
    <li>Make sure the transparent gif ('/images/s.gif') exists, or update that reference to the image in the pngHack method.</li>
    <li>Now for a little JavaScript. Use the pngHack() method on DOM objects to apply the hack selectively to those elements.
<pre>
// applies the pngHack to an element with the id of 'yourPNG'
$('yourPNG').pngHack();

// applies the pngHack to all the DOM objects collected
// from Prototypes CSS selector function
$$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');
</pre>
    </li>
    <li><strong>When used on img elements</strong>, the pngHack method requires that the img tags are given 'dimension'. What this means is that they must have a width and a height. This can be done with CSS or by writing the width and height HTML attributes to the page. <strong>When used on other elements, like divs</strong>, at least one dimension must be specified for the hack to work.</li>
  </ol>
  
  <hr />
  
  <h3><a name="examples">Examples:</a></h3>
  
  <ol id="oohYeah">
    <li style="background: #330;"><img src="images/image1.png" id="yourPNG" alt="Lambda" /></li>
    <li><div id="fixMe">fix me</div></li>
    <li id="andMeParent"><img src="images/image3.png" id="andMe" alt="Lambda" /></li>
    <li><img src="images/image1.png" class="andUsTo" alt="thing 1" style="height: 200px; width: 200px;" /></li>
    <li><img src="images/image3.png" class="andUsTo" alt="thing 2" style="height: 167px; width: 200px;" /></li>
    <li><img src="images/fixme.png" class="andUsTo" alt="thing 3" style="height: 200px; width: 400px;" /></li>
    <li>
      <div id="anotherExample" style="background: pink url(images/image3.png) no-repeat; height: 200px;">
        id="anotherExample" style="background: pink url(images/image3.png) no-repeat;"
      </div>
    </li>
  </ol>
  
  <hr />
  
  <h3><a name="download">Download or svn checkout:</a></h3>
  
  <ul>
    <li><a href="http://google.com/search?q=google+code+pnghack+zip&btnI=I%27m+Feeling+Lucky">Download an archive of the script.</a></li>
    <li>
      Or if you can use Subversion, do a checkout:
      <ul>
        <li><span style="font-family: monospace;">svn checkout http://pnghack.googlecode.com/svn/trunk/</span></li>
      </ul>
    </li>
  </ul>
  
  <hr />
  
  <h3><a name="known-issues">Known Issues:</a></h3>
  
  <ul>
    <li>This method does not account for CSS background images specified in :hover states.</li>
  </ul>

  <div id="foot">
    <hr />
    <p><small>This script is written by <a href="http://deletem3.com">Matt Garrett</a>.</small></p>
  </div>
  

</body>
</html>
